<template>
  <div class="pagination-section">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      :layout="layout"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="custom-pagination"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Pagination'
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';

export interface PaginationProps {
  total: number;
  pageSize?: number;
  currentPage?: number;
  pageSizes?: number[];
  layout?: string;
}

const props = withDefaults(defineProps<PaginationProps>(), {
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: () => [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper'
});

const emit = defineEmits(['update:pageSize', 'update:currentPage', 'pagination']);

// 内部状态
const currentPage = ref(props.currentPage);
const pageSize = ref(props.pageSize);

// 监听外部属性变化
watch(
  () => props.currentPage,
  (val) => {
    currentPage.value = val;
  }
);

watch(
  () => props.pageSize,
  (val) => {
    pageSize.value = val;
  }
);

// 监听内部状态变化
watch([currentPage, pageSize], ([newCurrentPage, newPageSize]) => {
  emit('update:currentPage', newCurrentPage);
  emit('update:pageSize', newPageSize);
  emit('pagination', {
    pageNum: newCurrentPage,
    pageSize: newPageSize
  });
});

// 处理页码改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

// 处理每页条数改变
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1; // 切换每页条数时重置为第一页
};
</script>

<style lang="scss" scoped>
.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;

  .custom-pagination {
    :deep(.el-pagination__total) {
      margin-right: 16px;
    }

    :deep(.el-pagination__sizes) {
      margin-right: 16px;
    }
  }
}
</style> 